<template>

	<div id="bodyContainer" style="height:100%;">
		<!--顶部导航-->
		<section id="topNav">
			<img src="../../assets/images/top.jpg" style="width: 100%;" />
			<!--       <el-menu class="el-menu-demo" mode="horizontal">
        <section style="display:inline-block;height:60px;padding-left:10px">
             <div style="padding-top:5px">
               <img src="../../assets/images/logoLoadding.gif" style="width:100px"/>
             </div>
             <div style="font-size:24px">慧尔智能图书馆公共检索平台<span v-if="sysVersion != ''" style="font-size: 16px">&nbsp;V{{sysVersion}}</span></div>
          </section>
          
        <el-button size="small" type="primary" v-if="!hasLogin" @click="Login" class="vertail-middle" style="right:10px">  <i class="el-icon-eleg-icon_profile el-icon--left"></i>读者登录
        </el-button>
        <el-submenu v-else index="userMenu" class="right-nav">
          <template slot="title"><i class="fa fa-user-circle-o" style="font-size: 20px;margin-right: 5px"></i>{{persionalInfo.name}}</template>
          <el-menu-item index="userMenu-1" @click="changePassword"><i class="el-icon-eleg-icon_lock el-icon--left"></i>{{$t('message.resetPassword')}}</el-menu-item>
          <el-menu-item index="userMenu-3" @click="logout"><i class="el-icon-upload2 el-icon--left"></i>{{$t('message.logout')}}</el-menu-item>
        </el-submenu>
      </el-menu> -->
		</section>
		<components :is="currentView" v-on:changeView="changeView"></components>

		<!-- 修改密码 -->
		<el-dialog title="修改密码" v-model="changePasswordDialog" :show-close="false" :class="[dialog-tiny-width]">
			<el-form id="form" ref="form" :model="form" :rules="rules" label-width="100px">
				<el-form-item :label="$t('message.oldPassword')" prop="OldPassword">
					<el-input v-model="form.OldPassword" type="password" required name="OldPassword" id="OldPassword"></el-input>
				</el-form-item>
				<el-form-item :label="$t('message.newPassword')" prop="NewPassword">
					<el-input v-model="form.NewPassword" type="password" required name="NewPassword" id="NewPassword"></el-input>
				</el-form-item>
				<el-form-item :label="$t('message.confirmPassword')" prop="CheckPwd">
					<el-input v-model="form.CheckPwd" type="password" required name="CheckPwd" id="CheckPwd"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="changePasswordDialog = false">取 消</el-button>
				<el-button type="danger" @click="resetForm">清 空</el-button>
				<el-button type="primary" @click="confirmChangePassword('form')">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>
<script>
	import Vue from 'vue'
	import locale from 'element-ui/lib/locale'
	import cnlang from 'element-ui/lib/locale/lang/zh-CN'
	import enlang from 'element-ui/lib/locale/lang/en'
	import $ from 'jquery'
	import { HttpServer, GloabFun, Animation } from '../../assets/js/common.js'
	const JSEncrypt = require("jsencrypt"); // 引入模块
	const encrypt = new JSEncrypt.JSEncrypt(); // 实例化加密对象
	// 主页面
	const HomeReader = resolve => require(['./Home/Index.vue'], resolve)
	export default {
		components: {
			HomeReader
		},
		data() {
			//密码验证
			var create_checkPassword = (rule, value, callback) => {
				if(this.form.OldPassword === '') {
					callback(new Error('新密码不能为空'));
				} else if(!((/^[0-9a-zA-Z_]{6,20}$/).test(this.form.OldPassword))) {
					callback(new Error('密码必须为6-20位数字、字母或下划线'));
				} else {
					callback();
				}
			}
			//再次输入密码验证
			var create_checkPass = (rule, value, callback) => {
				if(this.form.CheckPwd === '') {
					callback(new Error('请再次输入新密码'));
				} else if(this.form.CheckPwd !== this.form.NewPassword) {
					callback(new Error('两次输入密码不一致!'));
				} else {
					callback();
				}
			};
			return {
				sysVersion: '',
				currentView: 'HomeReader',
				hasLogin: true,
				changePasswordDialog: false,
				form: {
					OldPassword: "",
					NewPassword: "",
					CheckPwd: ""
				},
				rules: {
					OldPassword: [{
						required: true,
						trigger: 'blur',
						message: this.$t('message.oldPasswordRule')
					}],
					NewPassword: [{
						required: true,
						validator: create_checkPassword,
						trigger: 'blur'
					}],
					CheckPwd: [{
						required: true,
						validator: create_checkPass,
						trigger: 'blur'
					}]
				},
				persionalInfo: {
					type: '未知',
					readercode: '未知',
					holdcount: 0,
					holdlimit: 0,
					overduecount: 0,
					overduelimit: 0,
					chargedcount: 0,
					chargedlimit: 0
				},
			}
		},
		methods: {
			Login() {
				this.$router.push({
					path: '/Reader/Login'
				});
			},
			logout() {
				this.$confirm('确定退出当前页面吗？', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					GloabFun.clearReaderLoginInfo();
					this.$router.push({
						path: '/Reader/Login'
					});
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '操作取消'
					});
				});
			},
			changePassword() {
				this.changePasswordDialog = true;
			},
			resetForm() {
				this.form = {
					OldPassword: "",
					NewPassword: "",
					CheckPwd: ""
				};
			},
			//确认修改密码
			confirmChangePassword(formName) {
				this.$refs[formName].validate((valid) => {
					if(valid) {
						var param = {
							readercode: GloabFun.getReaderCode(),
							oldpassword: this.form.OldPassword,
							newpassword: this.form.NewPassword
						}
						HttpServer.httpPost.call(this, '/Api/Reader/UpdatePsw', param, function(response) {}, function(response) {
							if(response.data.code === 0) {
								this.$message({
									type: "success",
									message: '密码修改成功，请重新登录'
								});
								this.$router.push({
									path: '/Reader/Login'
								});
							} else {
								this.$message({
									type: "error",
									message: '操作失败'
								});
							}
						});
					} else {
						return false;
					}
				});
			},

			changeView(view) {
				Animation.animation($("#bodyContainer"), function() {
					this.currentView = view;
				}.bind(this));
			},
			//去掉时间中的T
			formateData(array) {
				for(var i = 0; i < array.length; i++) {
					var index1 = array[i].UpdateDate.indexOf("T");
					array[i].UpdateDate = array[i].UpdateDate.substring(0, index1) + " " + array[i].UpdateDate.substring(index1 + 1, index1 + 9);
				}
			},
		},
		created() {
			if(GloabFun.getReaderCode() == '') {
				this.hasLogin = false;
			} else {
				//查询系统版本
				// this.readerName = GloabFun.getReaderName();
				HttpServer.httpGet.call(this, '/Api/System/Version', function(response) {}, function(response) {
					this.sysVersion = response.data.version;
				});
				HttpServer.httpGet.call(this, '/Api/Reader/GetReaderByCode?readercode=' + GloabFun.getReaderCode(), function(response) {}, function(response) {
					// console.log('个人信息', response);
					if(response.data.code === 0) {
						response.data.readercode = GloabFun.getReaderCode();
						this.persionalInfo = response.data;
					} else {
						this.$message.error(response.data.msg);
					}
				});
			}
		}
	}
</script>
<style scoped>
	@import '../../assets/css/font-awesome-4.7.0/css/font-awesome.css';
</style>
//
<style lang="less">
	//     #topNav{
	//      .right-nav{
	//       .el-submenu__title{
	//         font-size:16px;
	//         // color:#13ce66;
	//         font-weight: bold;
	//       }
	//       .el-menu-item{
	//         color:#20a0ff;
	//       }
	//      }
	//    }
	//
</style>
<style scoped lang="less">
	@headerH: 65PX;
	#bodyContainer {
		background-color: #E0E0E0;
	}
	
	#topNav {
		height: @headerH;
		position: relative;
		z-index: 2;
		.el-menu-demo {
			height: @headerH;
		}
		.right-nav {
			float: right !important;
			right: 10px;
		}
	}
</style>